<template>
  <div>
    <!--商品图片-->
    <div class="G_picture">
      <img :src="goodData.gimg" alt="图片加载失败，请刷新" width="220px" height="230px">
    </div>
    <div class="G_good">
      <!--商品名称-->
      <h5 class="G_text">商品名称:</h5>
      <table>
        <tr>
          {{goodData.gname}}
        </tr>
      </table>
      <br>
      <!--商品价格-->
      <h5 class="G_text">商品价格:</h5>
      <table>
        <tr style="color: red">
          ￥{{goodData.price}}
        </tr>
      </table>
      <br>
      <!--商品库存-->
      <h5 class="G_text">商品库存:</h5>
      <table>
        <tr>
          {{goodData.ginventory}}
        </tr>
      </table>
    </div>
      <!--商品描述-->
    <div class="G_decrease">
      <h5 class="G_text2">商品描述:</h5>
      <table>
        <tr>
          {{goodData.gdescribe}}
        </tr>
      </table>
    </div>
    <div class="G_button">
      <!--修改按钮-->
      <input class="btn" type="button" value="修改" id="btn_change" @click="updateGood">
      <!--返回按钮-->
      <input class="btn" type="button" value="返回" id="btn_return" @click="toGoods">
    </div>
  </div>
</template>
<script>
  import {selectBygId} from "../api/merchant";

  export default {
    name: 'Goods',
    data(){
      return{
        goodData:[],
      }
    },
    methods:{
      updateGood(){
        this.selectGoodsBygId(this.$route.query.gId)
        this.$router.push({
          path:'/Agoods',
          query:{
            Good:this.goodData,
          }
        })
      },
      selectGoodsBygId(gId){
        selectBygId({
          gId:gId
        }).then(result => {
          this.goodData=result.data.data
        })
      },
      toGoods() {
        this.$router.replace({path: '/Goods'})
      },
    },
    created() {
      this.selectGoodsBygId(this.$route.query.gId)
    }
  }
</script>
<style scoped>
  .btn {
    background-color: #BEE8E8;
    border: black;
    height: 40px;
    width: 100px;
    border: 1px;
    border-radius: 30px;
    opacity: 0.7;
  }
  .G_picture{
    position: absolute;
    top: 20%;
    left: 35%;
    width: 220px;
    height: 230px;
    border: 1px solid #666;
  }
  .G_good{
    position: absolute;
    top: 16%;
    left: 60%;
  }
  .G_text{
    margin-right:100px
  }
  .G_decrease{
    position: absolute;
    top: 60%;
    left: 45%;
  }
  .G_text2{
    margin-left: -680px;
  } .G_button{
     position: absolute;
     top: 85%;
     left: 52%;
   }
</style>
